<template>
  <div class="login_scnav_wrap_loaded">
    <span class="title" onclick="location.href='/'" style="font-size: 20px"
      ><router-link :to="{ path: '/index.html' }">
        长沙市普通中小学入学报名系统
      </router-link
    ></span>
    <div class="nav_item_list">
      <span>
        <router-link :to="{ path: '/index.html' }">
          <i class="loaded_nav_icon shouye"></i>首页
        </router-link>
      </span>
      <span :class="{ active: isSelected === 1 }">
        <router-link :to="{ path: '/apply_info.html' }">
          <i class="loaded_nav_icon rxbm"></i>报名信息
        </router-link>
      </span>
      <span :class="{ active: isSelected === 2 }">
        <router-link :to="{ path: '/my_apply.html' }">
          <i class="loaded_nav_icon bmjd"></i>我的报名
        </router-link>
      </span>
      <span :class="{ active: isSelected === 3 }">
        <router-link :to="{ path: '/info_center.html' }">
          <i class="loaded_nav_icon xxzx"></i>消息中心
        </router-link>
      </span>
    </div>
    <div class="load_info" onclick="$('.xiala_list').toggle()">
      <img src="http://rxbm.csedu.gov.cn/imgs/head.jpg" />
      <a href="javascript:void(0)">13278890931</a>
      <i class="load_xiala" id="load_xiala"></i>
      <ul class="xiala_list">
        <li>
          <a href="/user/info/base"
            ><i class="peosoninfo"></i><span>个人信息</span></a
          >
        </li>
        <li>
          <a href="/user/info/pwd"
            ><i class="changepsw"></i><span>修改密码</span></a
          >
        </li>
        <li>
          <a href="/user/info/phone"
            ><i class="changephoto"></i><span>更换手机号</span></a
          >
        </li>
        <li>
          <a href="/user/signOut"
            ><i class="login_out"></i><span>退出登录</span></a
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonHeader",

  data() {
    return {
      isSelected: 1,
    };
  },

  mounted() {
    this.switchSelect();
  },

  methods: {
    switchSelect() {
      let path = this.$route.path;
      if (path.endsWith("/apply_info.html")) this.isSelected = 1;
      else if (path.endsWith("/my_apply.html")) this.isSelected = 2;
      else if (path.endsWith("/info_center.html")) this.isSelected = 3;
    },
  },
};
</script>

<style scoped>
.title a{ 
  color: #1c98d7;
}
</style>